<template>
  <view class="viewBox">
    <van-nav-bar title="收银台" left-arrow fixed placeholder z-index="88"
      custom-style="--nav-bar-arrow-size: 40rpx;--nav-bar-icon-color: #000;" @click-left="onClickLeft" />
    <form v-if="orderFailed">
      <view class="cashier-desk" v-if="purchanseList.length">
        <view class="cashier-desk__money">
          <view class="total-money">
            ￥<text>{{ `${totalAmountMoney.yuan}.` }}</text>{{ totalAmountMoney.points }}
          </view>
          <view class="exceeded">
            {{ totalAmountNeed >= 0 ? "待支付" : "超出" }}
            {{ Math.abs(totalAmountNeed) | amountFormat }} 元</view>
          <view class="count-down">
            支付剩余时间：<view>{{ outputTime[0] }}</view><text>:</text>
            <view>{{ outputTime[1] }}</view>
          </view>
        </view>
        <view class="cashier-desk__tip" v-if="tip">
          <view class="content">
            <icon class="iconfont icon">&#xe8c0;</icon>
            <text>根据您所需要的付款方式进行支付</text>
          </view>
          <icon class="iconfont icon" @tap="tip = false">&#xe650;</icon>
        </view>
        <view class="cashier-desk__scroll">
          <scroll-view scroll-y="true">
            <view class="cashier-desk__group scroll-view-item">
              <view class="title" @tap="openGoodsSeriesPay">
                <view :class="'disabled-group'">组合支付</view>
                <axq-checkbox :checked="enableGoodsSeriesPay" activeColor="#0C0" />
              </view>
              <scroll-view scroll-y="true">
                <view class="container" v-if="form.goodsSeriesList.length">
                  <view class="input-box" v-for="(item, index) in form.goodsSeriesList" :key="index">
                    <input :class="item.class" disabled type="number" :value="item.value" />
                    <view>{{ item.goodsSeries.name }}
                      <view v-if="!item.value">
                        <view>实际 {{ item.quantity + item.quantityFreeze }}</view>
                        <view>冻结 {{ item.quantityFreeze }}</view>
                      </view>
                    </view>
                    <view class="placeholder" v-if="!item.value"
                      :style="enableGoodsSeriesPay && !item.value && 'color: #999'">剩余 {{ item.quantity }}</view>
                  </view>
                </view>
                <view class="no-group" v-else>
                  <icon class="iconfont icon">&#xe60b;</icon>抱歉！您还没有预存组合，如需请联系客服。
                </view>
              </scroll-view>
            </view>
            <view class="cashier-desk__balance scroll-view-item">
              <view class="title">
                <view>余额支付</view>
                <view>
                  <view>
                    <view>实际 {{ (memberAccount.balance + memberAccount.balanceFreeze) || 0 }}</view>
                    <view>冻结 {{ memberAccount.balanceFreeze || 0 }}</view>
                  </view>
                  <view>可使用：{{ memberAccount.balance || 0 }}元</view>
                </view>
              </view>
              <view class="input-balance">
                <view :style="
                  form.remainingBalance.class && 'box-shadow: 0 0 0 2rpx #00c000;'
                ">
                  <input type="digit" :value="form.remainingBalance.value"
                    @focus="isFocus(form.remainingBalance, '.focus')" @input="
                      inputAccountCredited(
                        $event,
                        form.remainingBalance,
                        'remainingBalance'
                      )
                    " @blur="isFocus(form.remainingBalance, '')" />
                  <view class="placeholder" v-if="!form.remainingBalance.value">请输入余额</view>
                  <view class="vacum-up" @tap="amountEmpty(form.remainingBalance)">
                    <icon class="iconfont icon">&#xe62f;</icon>
                  </view>
                </view>
              </view>
            </view>
            <view class="cashier-desk__receiving-account scroll-view-item">
              <view class="title">
                <view>转账信息</view>
              </view>
              <view class="input-balance" v-if="form.axqSelfEmployedLaborerList.length">
                <view>{{ form.axqSelfEmployedLaborerList[0].name }}<view @tap="showPopupFunc('receiveAccount')">查看详情
                    <icon class="iconfont icon">&#xe641;</icon>
                  </view>
                </view>
                <view :style="
                  form.axqSelfEmployedLaborerList[0].class &&
                  'box-shadow: 0 0 0 2rpx #00c000;'
                ">
                  <input type="digit" :value="form.axqSelfEmployedLaborerList[0].value"
                    @focus="isFocus(form.axqSelfEmployedLaborerList[0], '.focus')"
                    @input="inputAccountCredited($event, form.axqSelfEmployedLaborerList[0], 'bankCardAmount')"
                    @blur="isFocus(form.axqSelfEmployedLaborerList[0], '')" />
                  <view class="placeholder" v-if="!form.axqSelfEmployedLaborerList[0].value">请输入转账金额</view>
                  <view class="vacum-up" @tap="amountEmpty(form.axqSelfEmployedLaborerList[0])">
                    <icon class="iconfont icon">&#xe62f;</icon>
                  </view>
                </view>
              </view>
              <view class="no-balance" v-else>
                <icon class="iconfont icon">&#xe60b;</icon>抱歉！您还没有收款账户，如需请联系客服。
              </view>
            </view>
            <view class="cashier-desk__notes scroll-view-item">
              <view class="title">
                <view>备注</view>
              </view>
              <view @tap="showPopupFunc('postscript')">
                <view>{{ form.remark || "请输入您的问题或要求" }}</view>
                <icon class="iconfont icon">&#xe641;</icon>
              </view>
            </view>
            <view class="cashier-desk__upload scroll-view-item">
              <view class="title">
                <view>上传凭证<text>注：请上传订单转账凭证截图</text></view>
              </view>
              <view class="pictures">
                <axq-uploader max-count="6" @change="changeUploadedPictures" />
              </view>
            </view>
            <view style="height:148rpx"></view>
          </scroll-view>
        </view>
        <view class="button" @tap="showPopupFunc('payResult')">
          <button class="print-order" :style="isPay && 'opacity: .5;'">
            确认支付信息
          </button>
        </view>
        <van-popup :show="popup.show" @click-overlay="popup.show = false" round position="bottom"
          custom-style="height: 80%;border-radius: 20rpx 20rpx 0 0">
          <view class="accountCredited" v-if="popup.type === 'receiveAccount'">
            <template>
              <view class="title">
                <view>{{ popup[popup.type].title }}</view>
                <icon class="iconfont icon" @tap="popup.show = false">&#xe650;</icon>
              </view>
              <view class="tip" v-if="popup[popup.type].tip">
                <view class="content">
                  <icon class="iconfont icon">&#xe8c0;</icon>
                  <text>{{ popup[popup.type].tipLable }}</text>
                </view>
                <icon class="iconfont icon" @tap="popup[popup.type].tip = false">&#xe650;</icon>
              </view>
            </template>
            <template>
              <view class="accountCredited__name">
                <view>名称</view>
                <view>{{ popup[popup.type].bankAccount.name }}</view>
              </view>
              <view class="accountCredited__back">
                <view>开户行</view>
                <view>{{ popup[popup.type].bankAccount.bankOpenAddress }}</view>
              </view>
              <view class="accountCredited__bank-card">
                <view>银行卡号</view>
                <view>{{
                    popup[popup.type].bankAccount.bankNumber
                }}<view class="copy" @tap="setClipboardData(popup[popup.type].bankAccount.bankNumber, '复制成功')">复制
                  </view>
                </view>
              </view>
            </template>
          </view>
          <view class="cashier-desk__postscript" v-else-if="popup.type === 'postscript'">
            <view class="title">
              <view class="name">备注</view>
              <icon @tap="popup.show = false" class="iconfont icon">&#xe650;</icon>
            </view>
            <view class="textbox">
              <textarea :value="form.remark" placeholder="选填；请输入您的问题和要求，我们帮您解决。" maxlength="200" confirm-type="done"
                @input="postscriptInput" />
              <view class="length"><text>{{ form.remark.length }}</text>/200</view>
            </view>
          </view>
          <view class="payResult" v-else>
            <view class="title">
              <view><text>确认支付信息</text>
                <icon class="iconfont icon" @tap="popup.show = false">&#xe650;</icon>
              </view>
            </view>
            <view class="money">
              <view>
                <text>￥</text><text>{{ totalAmountMoney.yuan }}.</text><text>{{ totalAmountMoney.points }}</text>
              </view>
              <view>订单金额</view>
            </view>
            <view class="group">
              <view>
                <view>组合支付：</view>
                <view>
                  <text>￥</text>
                  <text>{{ payResult.paymentGoodsSeriesPrestoreAmount[0] }}.</text>
                  <text>{{ payResult.paymentGoodsSeriesPrestoreAmount[1] }}</text>
                </view>
              </view>
              <scroll-view scroll-x="true">
                <view class="container">
                  <view v-for="(
                    item, index
                  ) in payResult.paymentGoodsSeriesPrestoreJson" :key="index">
                    {{ `${item.name}:${item.quantity}` }}</view>
                </view>
              </scroll-view>
            </view>
            <view class="balance">
              <view>
                <view>余额支付：</view>
                <view><text>￥</text>
                  <text>{{ payResult.paymentBalanceAmount[0] }}.</text>
                  <text>{{ payResult.paymentBalanceAmount[1] }}</text>
                </view>
              </view>
            </view>
            <view class="receiving-account">
              <view>
                <view>转账支付：</view>
              </view>
              <view>
                <view v-for="(item, index) in form.axqSelfEmployedLaborerList" :key="index">
                  <view>{{ item.name }}</view>
                  <view>
                    <text>￥</text><text>{{ payResult.paymentBankAmount[0] }}.</text><text>{{
                        payResult.paymentBankAmount[1]
                    }}</text>
                  </view>
                </view>
              </view>
            </view>
            <view class="actual-payment">
              <view class="actual-payment_title">实付金额</view>
              <view>
                <view class="actual-payment--real">
                  <text>￥</text><text>{{ payResult.actualAmount[0] }}.</text><text>{{
                      payResult.actualAmount[1]
                  }}</text>
                </view>
                <view class="actual-payment--over">超出金额转存为余额，超出￥{{ Math.abs(totalAmountNeed) }}</view>
              </view>
            </view>
            <view class="button">
              <view class="payResult--confirm" @tap="payOrder">确认提交</view>
            </view>
          </view>
          <view class="cashier-desk__postscript--button" @tap="popup.show = false">
            <view>确定</view>
          </view>
        </van-popup>
      </view>
    </form>
    <purchanse-failed custom-style="--order-failed-height:90vh" v-else />
  </view>
</template>
<script>
import axqUploader from "@/components/uploader"
import axqCheckbox from "@/components/checkbox";
import purchanseFailed from "./@fragment/purchanse-failed.vue";
import {
  model
} from "@/model";
import {
  mapState
} from "vuex";
const {
  PageBo,
  PurchanseCart
} = model.collection;
export default {
  data () {
    return {
      pSn: "",
      sn: "",
      legalAmount: /^(0|[1-9]\d*)?(\.\d{0,2})?$/,
      tip: true,
      enableGoodsSeriesPay: false,
      memberAccount: {},
      uploadedPictures: [],
      purchanseList: [],
      totalAmountNeed: 0,
      form: {
        axqSelfEmployedLaborerList: [],
        goodsSeriesList: [],
        remainingBalance: {
          class: "",
          value: "",
        },
        remark: ''
      },
      overtime: 0,
      throttle: this.$_.throttle(async () => {
        const res = await PurchanseCart.sendApi(
          "pay",
          this.getPayParameters
        );

        if (res.code !== 2000) {
          return;
        }
        this.totalAmountNeed = this.get(res, "data.totalAmountNeed", 0);
        this.purchanseList = this.get(res, "data.purchanseList", []);

      }, 1000, {
        'leading': false,
        'trailing': true
      }),
      popup: {
        type: "receiveAccount",
        show: false,
        receiveAccount: {
          title: "收款账户",
          tipLable: "以下是您的收款账户信息。",
          tip: true,
          bankAccount: {},
        },
      },
    };
  },
  components: {
    axqUploader,
    axqCheckbox,
    purchanseFailed
  },

  onLoad (params) {
    this.pSn = params.pSn;
    this.sn = params.sn;
    this.submitOrder = params.submitOrder;
    this.updateDetails();
  },
  computed: {
    ...mapState(["now"]),
    clock () {
      let expirationTime = ~~((this.overtime - this.now) / 1000);
      return {
        minute: Math.max(~~((expirationTime / 60) % 60), 0),
        second: Math.max(expirationTime % 60, 0),
      }
    },
    orderFailed () {
      return this.overtime ? Math.max(this.clock.minute, this.clock.second) : true
    },
    outputTime () {
      return [
        `0${this.clock.minute}`.slice(-2),
        `0${this.clock.second}`.slice(-2),
      ];
    },
    isPay () {
      return Math.max(this.totalAmountNeed, 0);
    },

    aggregateAmount () {
      return this.purchanseList.reduce((num, item) => {
        return num + item.amount;
      }, 0);
    },
    totalAmountMoney () {
      let amountArr = this.amountFormat(Math.max(this.aggregateAmount, 0)).split(".");
      return {
        yuan: amountArr[0],
        points: amountArr[1],
      };
    },
    getPayParameters: {
      get () {
        let remainingBalance = this.legalAmount.test(this.form.remainingBalance.value) &&  +this.form.remainingBalance.value;
        return {
          params: {
            sn: this.sn || this.pSn,
            type: this.sn ? 2 : 1,
            isPrePay: 1,
          },
          data: {
            paymentIsUseBalance: +Boolean(remainingBalance),
            paymentBalanceAmount: Math.min(remainingBalance || 0, this.memberAccount.balance ||
              0),
            paymentParamsBankBoList: this.form.axqSelfEmployedLaborerList.reduce((arr, item) => {
              let amount = this.legalAmount.test(item.value) && +item.value;
              return arr.concat(+item.value ? {
                amount: +amount || 0,
                name: item.name,
                sysReceptBankId: item.id,
              } : [])
            }, []),
            paymentIsUseGoodsSeriesPrestore: +this.enableGoodsSeriesPay,
            paymentIsUseSixueBalance: 0,
            paymentParamsGoodsSeriesBoList: [],
            paymentVoucherJson: [],
          },
        };
      },
      set () { },
    },
    payResult () {
      let result = this.purchanseList.reduce(
        (obj, order) => {
          obj.paymentBalanceAmount += order.paymentBalanceAmount;
          obj.paymentBankAmount += order.paymentBankAmount;
          obj.paymentGoodsSeriesPrestoreAmount +=
            order.paymentGoodsSeriesPrestoreAmount;

          JSON.parse(order.paymentGoodsSeriesPrestoreJson || "[]").forEach(
            (item) => {
              if (!obj.paymentGoodsSeriesPrestoreJson[item.goodsSeries.id]) {
                obj.paymentGoodsSeriesPrestoreJson[item.goodsSeries.id] = {
                  name: item.goodsSeries.name,
                  quantity: item.quantity,
                };
              } else {
                obj.paymentGoodsSeriesPrestoreJson[
                  item.goodsSeries.id
                ].quantity += item.quantity;
              }
            }
          );
          return obj;
        }, {
        paymentBalanceAmount: 0,
        paymentBankAmount: 0,
        paymentGoodsSeriesPrestoreJson: {},
        paymentGoodsSeriesPrestoreAmount: 0,
      }
      );
      result.paymentBalanceAmount = this.amountFormat(result.paymentBalanceAmount).split('.');
      result.paymentBankAmount = this.amountFormat(result.paymentBankAmount).split('.');
      result.paymentGoodsSeriesPrestoreAmount = this.amountFormat(result.paymentGoodsSeriesPrestoreAmount).split('.');
      result.actualAmount = this.amountFormat((this.aggregateAmount + Math.abs(this.totalAmountNeed))).split('.');
      return result
    },
  },
  watch: {
    getPayParameters () {
      if (this.stopQuerySettlementAmount) {
        return
      }
      this.stopQuerySettlementAmount = true;
      this.throttle()
    },
    'payResult': {
      handler: function (e) {
        this.form.goodsSeriesList.forEach(item => {
          item.value = e.paymentGoodsSeriesPrestoreJson[item.goodsSeriesId] ? e.paymentGoodsSeriesPrestoreJson[
            item.goodsSeriesId].quantity : ''
        })
      },
      deep: true
    }
  },
  methods: {
    async updateDetails () {
      const res = await PageBo.sendApi("info", {
        params: {
          page: "pagePurchansePay",
        },
        data: Object.assign({}, this.pSn ? {
          pSn: this.pSn
        } : {
          sn: this.sn
        }),
      });
      if (res.code !== 2000) {
        return;
      }
      let purchanseList = this.get(res, "data.purchanseList", []);
      let axqSelfEmployedLaborerList = this.get(
        res,
        "data.axqSelfEmployedLaborerList",
        []
      ).filter(x => x.id === this.get(this.info, '_raw.axqSelfEmployedLaborerId'));

      axqSelfEmployedLaborerList[0] &&
        Object.assign(axqSelfEmployedLaborerList[0], {
          class: "",
          value: "",
        });
      this.form.goodsSeriesList = this.get(res, "data.memberGoodsSeriesPrestoreList", []).map((item) => {
        item.value = "";
        item.class = "";
        return item;
      });
      this.popup.receiveAccount.bankAccount = axqSelfEmployedLaborerList[0];
      this.form.axqSelfEmployedLaborerList = axqSelfEmployedLaborerList;
      this.memberAccount = this.get(res, "data.memberAccount", {});
      this.purchanseList = purchanseList;
      this.totalAmountNeed = this.aggregateAmount;
      this.overtime = this.get(res, "data.overtime", Date.now());
    },
    async payOrder () {
      let form = this.getPayParameters;
      form.params.pSn = this.pSn;
      form.params.isPrePay = 0;
      form.data.paymentVoucherJson = JSON.stringify(this.uploadedPictures);
      form.data.remark = this.form.remark;
      const res = await PurchanseCart.sendApi("pay", form);
      if (res.code !== 2000) {
        return;
      }
      let purchanseList = this.get(res, "data.purchanseList", []).map(
        (item) => {
          return {
            sn: item.sn,
            type: item.type,
            id: item.id,
          };
        }
      );
      this.red(
        "/subpackage/order/pages/purchanse/pay-success?purchanseList=" +
        JSON.stringify(purchanseList)
      );
    },
    changeUploadedPictures (list) {
      this.uploadedPictures = list;
    },
    showPopupFunc (name) {
      if (name === "payResult" && this.isPay) {
        return;
      }

      if (name === "payResult" &&
        this.form.axqSelfEmployedLaborerList.length &&
        this.form.axqSelfEmployedLaborerList[0].value &&
        !this.uploadedPictures.length
      ) {
        this.toast("您已输入转账金额，请上传转账凭证截图！");
        return
      }

      this.popup.show = !this.popup.show;
      this.popup.type = name;
      this.popup[name] && (this.popup[name].tip = true);
    },
    isFocus (item, value) {
      item.class = value;
    },
    inputAccountCredited (e, item, type) {
      const {
        value
      } = e.detail;
      item.value = value;
      this.stopQuerySettlementAmount = false;
      if (type === "remainingBalance") {
        if (!this.legalAmount.test(item.value)) {
          return this.toast("您输入的余额不合法！");
        }
        value > this.memberAccount.balance && this.toast("超出当前余额使用");
      }
      if (type === "bankCardAmount" && !this.legalAmount.test(item.value)) {
        this.toast("您输入的金额不合法！");
      }
    },
    amountEmpty (item) {
      if (item.value) {
        item.value = "";
        this.stopQuerySettlementAmount = false;
        return;
      }
      item.value = "";
    },
    openGoodsSeriesPay () {
      this.stopQuerySettlementAmount = false;
      this.enableGoodsSeriesPay = !this.enableGoodsSeriesPay
    },
    postscriptInput (e) {
      this.form.remark = e.detail.value;
    },
    onClickLeft () {
      if (!this.submitOrder) {
        this.back()
        return
      }

      uni.showModal({
        cancelColor: "#999999",
        cancelText: "放弃",
        confirmColor: "#DB187C",
        confirmText: "继续支付",
        title: "是否取消付款？",
        content: "取消后，可在【我的订单】查看 并在一定时间内付款。",
        success: (res) => {
          if (!res.confirm) {
            this.back()
          }
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.viewBox {
  display: flex;
  flex-direction: column;
  height: 100vh;

  >form {
    flex: 1;
    height: 0;
  }
}

.cashier-desk {
  display: flex;
  flex-direction: column;
  height: 100%;

  >view,
  .scroll-view-item {
    padding: 0 30rpx;
    background-color: #fff;

    .title {
      justify-content: space-between;
      width: 100%;
      height: 100rpx;
      box-shadow: 0 1rpx 0 0 #f1f1f1;
      font-size: 30rpx;
      font-weight: bold;
      color: #333333;

      >view:first-child {
        &::before {
          content: "";
          margin-right: 6rpx;
          width: 6rpx;
          height: 36rpx;
          background: #db187c;
          border-radius: 3rpx;
        }
      }

      >view+view {
        font-weight: 500;
        color: #999;
      }
    }
  }

  view {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cashier-desk__money {
    flex-direction: column;
    justify-content: center;
    flex-shrink: 0;
    height: 210rpx;
    background-color: #f8f8f8;

    .total-money {
      align-items: baseline;
      font-size: 30rpx;
      font-weight: 800;
      color: #ff0a01;
      line-height: 30rpx;

      text {
        font-size: 48rpx;
      }
    }

    .exceeded {
      position: relative;
      margin: 19rpx 0 22rpx 0;
      font-size: 26rpx;
      color: #666;
      line-height: 32rpx;

      &::after {
        content: "超出的金额将存入余款";
        position: absolute;
        left: 100%;
        bottom: 0;
        font-size: 20rpx;
        color: #ff8500;
        white-space: nowrap;
        transform: translateX(10rpx);
      }
    }

    .count-down {
      font-size: 24rpx;
      color: #333;

      view {
        justify-content: center;
        width: 36rpx;
        height: 36rpx;
        background: #ffffff;
        border-radius: 2rpx;
        box-shadow: 0 0 0 1rpx #e5e5e5;
      }

      text {
        margin: 0 10rpx;
      }
    }
  }

  .cashier-desk__tip {
    flex-shrink: 0;
    height: 90rpx;
    background-color: #fff3cd;
    color: #ff8500;
    box-sizing: border-box;

    .icon {
      margin-top: -13rpx;
      font-size: 36rpx;
      transform: translateY(3rpx);
    }

    .content {
      align-items: flex-end;
      font-size: 28rpx;
      color: #ff8500;

      text {
        margin-left: 18rpx;
      }
    }
  }

  .cashier-desk__scroll {
    flex-grow: 1;
    position: relative;
    background-color: #f8f8f8;

    >scroll-view {
      position: absolute;
      left: 0;
      height: 100%;
    }
  }

  .cashier-desk__group {
    flex-direction: column;
    margin-bottom: 30rpx;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0 0 20rpx 20rpx;

    .title {
      .disabled-group {
        position: relative;

        &::after {
          content: "选择组合支付，系统自动扣除";
          position: absolute;
          font-size: 28rpx;
          color: #ff8500;
          white-space: nowrap;
          transform: translateX(42%);
        }
      }
    }

    scroll-view {
      padding-top: 30rpx;
      max-height: 500rpx;

      .container {
        flex-wrap: wrap;
      }

      .input-box {
        position: relative;
        flex-shrink: 0;
        margin-bottom: 22rpx;
        width: calc(50% - 12rpx);
        font-size: 30rpx;

        input {
          padding: 0 20rpx 0 73rpx;
          width: 100%;
          height: 90rpx;
          background: #f8f8f8;
          border: 1px solid #e5e5e5;
          text-align: right;
          border-radius: 10rpx;
        }

        input+view {
          position: absolute;
          top: 0;
          left: 20rpx;
          height: 100%;
          font-weight: bold;
          color: #333;

          >view {
            position: absolute;
            left: calc(100% + 18rpx);
            top: 50%;
            z-index: 20;
            display: block;
            font-size: 20rpx;
            font-weight: 400;
            color: #999;
            transform: translateY(-50%);

            >view {
              white-space: nowrap;
            }
          }
        }

        input+view .focus {
          border-color: #00c000;
        }

        .input-error {
          border-color: #ff0a01;
          background-color: #ffe6e5;
        }

        .placeholder {
          position: absolute;
          display: block;
          right: 17rpx;
          color: #333;
        }
      }
    }
  }

  .cashier-desk__balance {
    .title {
      >view:last-child {
        color: #333;

        >view:first-child {
          display: block;
          margin-right: 18rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: #999;
        }
      }
    }
  }

  .cashier-desk__group,
  .cashier-desk__receiving-account {

    .no-balance,
    .no-group {
      justify-content: center;
      margin-bottom: 30rpx;
      font-size: 30rpx;
      color: #ff8500;

      .icon {
        margin-top: -7rpx;
      }
    }
  }

  .cashier-desk__receiving-account {
    .input-balance {
      >view:first-child {
        width: 100%;

        >view {
          white-space: nowrap;

          .icon {
            display: block;
          }
        }
      }
    }

    .no-balance {
      margin: 30rpx 0;
      width: 100%;
    }
  }

  .cashier-desk__notes {
    >view:last-child {
      padding: 30rpx 0;
      width: 100%;
      font-size: 30rpx;
      color: #666;
      line-height: 30rpx;

      >view {
        display: block;
        width: 76%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .icon {
        display: flex;
        color: #999;
      }

      .icon::before {
        content: "去填写";
        font-size: 28rpx;
      }
    }
  }

  .cashier-desk__balance,
  .cashier-desk__receiving-account,
  .cashier-desk__upload,
  .cashier-desk__notes {
    flex-wrap: wrap;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    width: 100%;
    box-sizing: border-box;

    .input-balance {
      padding: 30rpx 0;
      width: 100%;

      >view:last-child {
        position: relative;
        width: 100%;
        border-radius: 10rpx;
        box-shadow: 0 0 0 2rpx #e5e5e5;

        input {
          width: calc(100% - 78rpx);
          height: 88rpx;
          padding-left: 60rpx;
          box-sizing: border-box;

          &::before {
            content: "￥";
            position: absolute;
            top: 0;
            left: 18rpx;
            height: 100%;
            line-height: 88rpx;
            font-size: 40rpx;
            color: #666;
          }
        }

        .placeholder {
          position: absolute;
          left: 60rpx;
          font-size: 36rpx;
          color: #999;
        }

        .vacum-up {
          position: absolute;
          top: 0;
          right: 0;
          width: 78rpx;
          height: 100%;
          justify-content: center;

          .icon {
            font-size: 52rpx;
            color: #e5e5e5;
          }
        }
      }
    }
  }

  .cashier-desk__receiving-account {
    .input-balance {
      flex-wrap: wrap;

      >view:first-child {
        margin-bottom: 30rpx;
        font-size: 30rpx;
        line-height: 30rpx;
        color: #666;

        >view {
          align-items: flex-end;
          font-size: 28rpx;
          color: #999;

          .icon {
            margin: -13rpx -10rpx 0 0;
          }
        }
      }
    }
  }

  .cashier-desk__upload {
    .title {
      text {
        margin-left: 20rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #ff8500;
      }
    }

    .pictures {
      flex-wrap: wrap;
      padding-top: 30rpx;

      /deep/ .van-uploader__wrapper {
        .van-uploader__preview,
        .van-uploader__upload,
        .van-uploader__preview-image {
          width: 220rpx !important;
          height: 220rpx !important;
        }

        .van-uploader__preview:nth-child(3n),
        .van-uploader__upload {
          margin-right: 0;
        }

        .van-uploader__preview-delete,
        .van-uploader__preview-delete::after {
          width: 47rpx !important;
          height: 47rpx !important;
        }

        .van-uploader__preview-delete-icon {
          font-size: 50rpx !important;
        }
      }
    }
  }

  .accountCredited,
  .cashier-desk__postscript {
    flex-direction: column;

    >view {
      padding: 0 30rpx;
      width: 100%;
      height: 100rpx;
      color: #333;
      box-sizing: border-box;
    }

    .title {
      font-size: 34rpx;
      font-weight: bold;
      border-bottom: 1rpx solid #f1f1f1;

      .icon {
        color: #999;
      }
    }

    .tip {
      height: 90rpx;
      background-color: #fff3cd;
      color: #ff8500;

      .icon {
        margin-top: -13rpx;
        font-size: 36rpx;
      }

      .content {
        color: #ff8500;
        display: flex;
        align-items: center;
        font-size: 28rpx;

        text {
          margin-left: 18rpx;
        }
      }
    }

    .accountCredited__name,
    .accountCredited__back,
    .accountCredited__bank-card {
      padding: 0;
      margin: 0 30rpx;
      width: calc(100% - 60rpx);
      box-shadow: 0 1rpx 0 0 #f1f1f1;

      >view:last-child {
        font-size: 30rpx;
        color: #666;
      }
    }

    .accountCredited__bank-card {
      .copy {
        margin-left: 47rpx;
        padding-left: 30rpx;
        height: 36rpx;
        font-weight: 400;
        color: #db187c;
        box-shadow: -2rpx 0 0 0 #ebeef5;
      }
    }

    .button {
      position: absolute;
      height: 148rpx;

      .accountCredited--confirm {
        justify-content: center;
        font-size: 34rpx;
        font-weight: bold;
      }
    }
  }

  .cashier-desk__postscript {
    .textbox {
      position: relative;
      height: auto;
      padding-top: 30rpx;

      textarea {
        padding: 30rpx;
        width: 100%;
        height: 360rpx;
        font-size: 30rpx;
        background-color: #f8f8f8;
        border-radius: 20rpx;
      }

      .length {
        position: absolute;
        bottom: 30rpx;
        right: 60rpx;
        font-size: 26rpx;

        text {
          color: #999;
        }
      }
    }
  }

  .cashier-desk__postscript--button {
    display: none;
  }

  .cashier-desk__postscript+.cashier-desk__postscript--button {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    width: 100%;
    height: 148rpx;
    box-shadow: 0 0 11rpx 0 rgba(8, 1, 3, 0.1);
    box-sizing: border-box;

    >view {
      display: block;
      width: 100%;
      height: 90rpx;
      font-size: 34rpx;
      font-weight: bold;
      color: #fff;
      background: #db187c;
      text-align: center;
      line-height: 90rpx;
      border-radius: 6rpx;
    }
  }

  .payResult {
    flex-direction: column;

    >view {
      width: 100%;
      height: 100rpx;
      color: #333;
    }

    .title {
      flex-direction: row-reverse;
      font-size: 34rpx;
      font-weight: bold;

      >view {
        justify-content: space-between;
        width: 50%;

        >text {
          transform: translateX(-50%);
        }
      }

      .icon {
        color: #999;
        margin-right: 30rpx;
      }
    }

    .money {
      flex-direction: column;
      justify-content: center;
      height: 148rpx;
      font-size: 30rpx;
      background: #f8f8f8;

      >view:first-child {
        align-items: flex-end;
        margin-bottom: 11rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #333;

        >text {
          font-weight: bold;
          line-height: 0.9;
        }

        >text:nth-child(2) {
          font-size: 56rpx;
        }
      }

      >view:last-child {
        color: #666;
      }
    }

    .group {
      flex-direction: column;
      justify-content: center;
      padding: 0 30rpx;
      height: 183rpx;
      border-bottom: 1rpx solid #e5e5e5;

      scroll-view {
        margin-top: 30rpx;

        .container {
          display: flex;
          justify-content: flex-start;

          >view {
            margin-right: 18rpx;
            padding: 0 20rpx;
            width: fit-content;
            height: 58rpx;
            font-size: 26rpx;
            color: #333;
            border: 1rpx solid #e5e5e5;
            border-radius: 10rpx;
          }
        }
      }
    }

    .balance {
      height: 90rpx;
      background: #ffffff;
      border-bottom: 1rpx solid #e5e5e5;
    }

    .receiving-account {
      flex-direction: column;
      justify-content: flex-start;
      height: auto;
      border-bottom: 1rpx solid #e5e5e5;

      >view:first-child {
        margin: 19rpx 0 7rpx;
      }

      >view:last-child {
        flex-direction: column;
        width: 100%;
        margin-bottom: 27rpx;

        >view {
          justify-content: space-between;
          width: 100%;
          font-size: 28rpx;
          font-weight: 400;
          color: #666;
          line-height: 34rpx;

          >view:last-child {
            align-items: flex-end;
            color: #333;

            >text {
              font-size: 24rpx;
              font-weight: bold;
              line-height: 1.1;
            }

            >text:nth-child(2) {
              font-size: 34rpx;
            }

            >text:last-child {
              font-weight: 500;
            }
          }
        }
      }
    }

    .group,
    .balance,
    .receiving-account {
      padding: 0 30rpx;
      box-sizing: border-box;

      >view:first-child {
        justify-content: space-between;
        width: 100%;
        font-size: 34rpx;
        color: #333;

        >view:last-child {
          align-items: flex-end;

          >text {
            font-size: 24rpx;
            font-weight: bold;
            line-height: 1.1;
          }

          >text:nth-child(2) {
            font-size: 34rpx;
          }

          >text:last-child {
            font-weight: 500;
          }
        }
      }
    }

    .actual-payment {
      align-items: flex-start;
      padding: 60rpx 30rpx 0;
      margin: 20rpx 0;
      box-sizing: border-box;

      &_title {
        font-size: 34rpx;
        font-weight: bold;
        color: #333;
      }

      &--real {
        display: flex;
        align-items: flex-end;
        margin-bottom: 10rpx;
        font-weight: bold;
        color: #ff0b0b;

        >text {
          font-size: 24rpx;
          line-height: 1.1;
        }

        >text:nth-child(2) {
          font-size: 34rpx;
        }

        >text:last-child {
          font-weight: 500;
        }
      }

      &--over {
        font-size: 28rpx;
        font-weight: bold;
        color: #ff8500;
      }

      >view:last-child {
        flex-direction: column;
        align-items: flex-end;
      }
    }

    .button {
      position: absolute;
      height: auto;
      box-shadow: none;

      .payResult--confirm {
        justify-content: center;
        margin: 30rpx 0;
        width: 100%;
        height: 90rpx;
        font-size: 34rpx;
        font-weight: bold;
        background: #db187c;
        color: #fff;
        border-radius: 6rpx;
      }
    }
  }

  .button {
    position: fixed;
    z-index: 10;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    width: 100%;
    height: 148rpx;
    box-shadow: 0 0 11rpx 0 rgba(8, 1, 3, 0.1);
    box-sizing: border-box;
    background-color: #fff;

    .print-order,
    .accountCredited--confirm {
      width: 100%;
      height: 90rpx;
      font-size: 30rpx;
      font-weight: bold;
      color: #fff;
      background: #db187c;
      text-align: center;
      line-height: 90rpx;
      border-radius: 6rpx;
    }
  }
}
</style>